<%--
  添加like模板
  User: guoyao
  Date: 14-06-20
  Time: 下午2:55
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ include file="/WEB-INF/tags/taglibs.jsp" %>
<html>
<head>
    <title>添加音频信息</title>
    <!-- 加载上传控件的css 和 js -->
    <link rel="stylesheet" type="text/css" href="${ctx}/static/jquery/uploadify/uploadify.css"/>
    <script type="text/javascript" src="${ctx}/static/jquery/uploadify/swfobject.js"></script>
    <script type="text/javascript" src="${ctx}/static/jquery/uploadify/jquery.uploadify_zh.v2.1.4.js"></script>
    <%--整理demo屏蔽demo--%>
</head>
<body>
<style>
    body {
        margin: 0;
        text-align: center;
    }

    #clipArea {
        margin: 0 auto;
        width: 900px;
        height: 550px;

    }

    #file, #clipBtn {
        margin: 20px;
    }

    #view {
        margin: 0;
        width: 160px;
        height: 160px;
    }
</style>
<div class="easyui-layout" data-options="fit:true">
    <form id="submitForm" method="post">
        <div data-options="region:'center',border:false" style="padding:5px;background:#fff;border:1px solid #ccc;">
            <table class="doc-table">
                <tr>
                    <th width="15%"></th>
                    <th width="50%"></th>
                </tr>
                <tr>
                    <td class="labelTd">标题:</td>
                    <td>
                        <input type="text" class="easyui-validatebox" style="width: 200px;" name="audioTitle"
                               data-options="required:true">
                    </td>
                </tr>
                <tr>
                    <td class="labelTd">关键词:</td>
                    <td>
                        <input type="text" class="easyui-validatebox" style="width: 350px;" name="keyword"
                               data-options="required:true">
                    </td>
                </tr>
                <tr>
                    <td class="labelTd">摘要:</td>
                    <td>
                        <textarea style="overflow:auto;border:1;width:350px;height:65px;font-size: 12px;" name="details"
                                  data-options=" required:true"></textarea>
                    </td>
                </tr>
                <tr>
                    <td class="labelTd">图片:</td>
                    <td colspan="3">
                        <input type="hidden" name="fileDate" id="fileDate"/>
                        <%--<table cellpadding="0" cellspacing="0">
                            <tr id="fileUploadImage">
                                <td style="border: 0px ;height: 30px;">
                                    <div id="clipArea"></div>
                                    <input type="file" id="file">
                                    <button id="clipBtn">截取</button>
                                    <div id="view"></div>
                                </td>
                            </tr>
                        </table>--%>
                        <%--<div id="custom-queue_image"></div>--%>
                        <%--<div id="images">--%>
                        <%--</div>--%>
                        <div id="view"></div>
                        <a href="#modal" class="easyui-linkbutton">上传图片></a>
                    </td>
                </tr>
                <tr>
                    <td class="labelTd">音频文件:</td>
                    <td colspan="3">
                        <table cellpadding="0" cellspacing="0">
                            <tr id="fileUpload">
                                <td style="border: 0px ;height: 30px;"><input id="upload_video" type="file"/></td>
                                <td style="border: 0px ;height: 30px;">支持mp3、wav、asf格式</td>
                            </tr>
                        </table>
                        <div id="custom-queue"></div>
                        <%--<div id="video"></div>--%>
                        <input type="hidden" id="videoId" name="videoId">
                    </td>

                </tr>
                <tr>
                    <td class="labelTd">发布状态:</td>
                    <td>
                        <input id="video_state" class="easyui-combobox" name="state" data-options="
                                    url:'<c:url value="/sys/queryComboboxByDict.html?type=VIDEO_STATE&selected=0" />',
                                    method:'get',
                                    valueField:'id',
                                    validType: 'selectValueRequired',
                                    panelHeight:'auto',
                                    validType: 'selectValueRequired',
                                    onLoadError: function (httpRequest) {
                                        displayJsonError(httpRequest);
                                    }
                                ">
                    </td>
                </tr>
                <tr>
                    <td class="labelTd">时长:</td>
                    <td>
                        <input type="text" id="timeLength" class="easyui-validatebox" name="duration" readonly="true"
                               data-options="required:true">
                    </td>
                </tr>
                <%--<tr>
                    <td class="labelTd">发布时间:</td>
                    <td>
                        <input type="text" class="easyui-validatebox" name="deliveryTime" readonly="true">
                    </td>
                </tr>--%>
            </table>
        </div>
        <div data-options="region:'south',border:false" style="text-align:right;padding:5px 0;">
            <a href="javascript:void(0)" id="product_save" class="easyui-linkbutton" iconCls="icon-ok"
               onclick="submitVideo();">保存</a>
            <a href="javascript:void(0)" class="easyui-linkbutton" iconCls="icon-cancel" onclick="closeWindow();">取消</a>
        </div>
    </form>
</div>

<div class="remodal" style="max-width:970px;" data-remodal-id="modal" role="dialog" aria-labelledby="modal1Title"
     aria-describedby="modal1Desc">
    <button data-remodal-action="close" class="remodal-close" aria-label="Close"></button>
    <%--<table cellpadding="0" cellspacing="0">--%>
    <%--<tr id="fileUploadImage">--%>
    <%--<td style="border: 0px ;height: 30px;">--%>
    <div id="clipArea"></div>
    <input type="file" id="file">
    <button id="clipBtn" data-remodal-action="confirm">截取</button>
    <%--<div id="view"></div>--%>
    <%--</td>--%>
    <%--</tr>--%>
    <%--</table>--%>
    <%--<div>
        <h2 id="modal1Title">Remodal</h2>
        <p id="modal1Desc">
            Responsive, lightweight, fast, synchronized with CSS animations, fully customizable modal window plugin
            with declarative state notation and hash tracking.
        </p>
    </div>
    <br>
    <button data-remodal-action="cancel" class="remodal-cancel">Cancel</button>
    <button data-remodal-action="confirm" class="remodal-confirm">OK</button>--%>
</div>
<script src="${ctx}/static/demo/photo_clip/iscroll-zoom.js"></script>
<script src="${ctx}/static/demo/photo_clip/hammer.js"></script>
<script src="${ctx}/static/demo/photo_clip/jquery.photoClip.js"></script>
<link rel="stylesheet" href="${ctx}/static/demo/remodal/remodal.css">
<link rel="stylesheet" href="${ctx}/static/demo/remodal/remodal-default-theme.css">
<script src="${ctx}/static/demo/remodal/remodal.js"></script>
<script type="text/javascript">
    function submitVideo() {
        var pisData = $('#fileDate').val();
        if (pisData == null || pisData == '') {
            promptMessage('请上传图片!');
//            $.messager.alert('提示信息', '<br/>' + '请上传图片!');
            return;
        }
        insertSubmit();
    }
    $(document).ready(function () {
        $("#upload_video").uploadify({
            'uploader': '${ctx}/static/jquery/uploadify/uploadify.swf',
            'script': '${ctx}/servlet/uploadvideo',  // 后台处理连接
            <%--'script': '${ctx}/likeWord/doUploadHandle.html',  // 后台处理连接--%>
            //'scriptData': {'eid':strEid, 'dirId':dirIdStr, 'adminId':adminId},
            'method': 'POST',
            'cancelImg': '${ctx}/static/jquery/uploadify/cancel.png',
            'queueID': 'custom-queue',   //加载的id
            'multi': false,
            'auto': true,  //是否自动上传
            'manualId': 'testManualUploadify', // 手动上传ID,最好配合上传成功后的提交按钮使用
            'folder': '${ctx}/js/uploadify/uploads',
//            'fileExt': '*.mp3;*.wav;*.asf',
            'fileExt': '*.mp3',
            'fileDesc': '选择音频',
            'removeCompleted': true,
//            'sizeLimit' : 524288,
//            'sizeLimit': 2524288,
            //'hideButton':false,
            //'buttonText':'上传图片',
            'buttonImg': '${ctx}/static/jquery/uploadify/select_zh.gif',
            'wmode': 'transparent',
            'width': '70',
            'height': '30',
            'onSelectOnce': function (event, data) {
            },
            'onAllComplete': function (event, data) {
            },
            'onProgress': function (event, queueId, fileObj, data) {
                $('#product_submit').attr('disabled', true);
                $("#product_save").attr('disabled', true);
            },
            'onSelect': function (event, queueId, fileObj) {
            },
            'onCancel': function (event, ID, fileObj, data, remove, clearFast) {
                // remove 已经上传的文件
            },
            'onComplete': function (event, queueId, fileObj, response, data) {
                var json = eval("(" + response + ")");
//                        alert(json.src);  // 浏览地址
//                        alert(json.name); // 文件名称
//                alert(json.realUrl);
                analysisTime(json.realUrl);
                $('#videoId').val(json.fileId);
                $("#product_submit").attr('disabled', false);
                $("#product_save").attr('disabled', false);
            }
        });

        // 删除多余模态
        var remodalNum = $('.remodal').size();
        if (remodalNum > 1) {
            $('.remodal').eq(0).remove();
        }
    });

    /**
     * 图片裁剪控件
     */
    $("#clipArea").photoClip({
        width: 400,
        height: 400,
        file: "#file",
        view: "#view",
        ok: "#clipBtn",
        strictSize: false,
        loadStart: function () {
            $('#view').html('');
        },
        loadComplete: function () {
        },
        clipFinish: function (dataURL) {
            $('#fileDate').val(dataURL);
        }
    });

    $(document).one('opening', '.remodal', function () {
    });

    // 关闭模态时 清除框体
    $(document).on('closing', '.remodal', function (e) {
//        $('#clipArea').html('');
    });

    /**
     *  解析音频时常
     */
    function analysisTime(url) {
        var data = {'fileUrl': url};
        $.ajax({
            type: "POST",
            url: "${ctx}/likeVideo/analysisTime.html",
            data: data,
            dataType: "json",
            success: function (msg) {
                $('#timeLength').val(msg.time);
                $('#timeLength').focus();
            }
        });
    }
</script>
</body>
</html>
